import React, { Component } from 'react';
import ReactDOM from 'react-dom';

/* 
时钟案例
*/

class Clock extends Component{
  constructor(props){
    super(props)
    this.state = {date: new Date()}
  }
  //当组件渲染完毕后调用
  componentDidMount(){
    this.id = setInterval(()=>{
      // 获取系统中最新的时间
      this.setState({
        date: new Date()
      })
    }, 1000)
  }
  //当组件被移除的时候调用
  componentWillUnmount(){
    clearInterval(this.id)
  }
  render(){
    return (
      <div>
        {this.state.date.toLocaleTimeString()}
      </div>
    )
  }
}

ReactDOM.render(<Clock/>, document.getElementById('root'))
